<!DOCTYPE html>
<html>
<head>
    <title>短网址服务</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/custom.css') }}">
</head>

<script type="text/javascript">
 $(function() {
     $('#submitButton').click(function() {
         $.ajax({
             type: "POST",
             url: "/shorten",
             data: JSON.stringify({'url' : $('#url').val()}),
             success: returnSuccess,
             dataType: 'json',
             contentType: "application/json",
         });
     });
});

function returnSuccess(data, textStatus, jqXHR) {
    if(data.url) {
        $('#url-result').text(data.url);
        $('#url').val("");
        $("a").attr("href", data.url)
    } else {
        $('#url-result').text("请输入一个URL!");
    }
}
</script>

<body>
    <div id="wrap">
        <header>
           <h1><a href="">短网址服务</a></h1>
           <p>请输入一个网址</p>
        </header>
        <div class="container">
            <div class="row">
                <div class="col s12">
                    <input type="text" name="url" id="url" class="form-control input-sm" placeholder="请输入一个合法的网址" />
                </div>
            </div>
            <div class="row">
                <div class="col s4 offset-s4">
                    <button id="submitButton" class="waves-effect waves-light btn-large blue darken-1">生成</button>
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                    <div class="panel-footer">
                        <h4>
                            <a href="#" id="url-result">输入 URL</a>
                        </h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


<!-- 短网址服务，前端代码参考 aiohttp demo -->
